<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='format-detection' content='telephone=no' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <title>layer-weui</title>
    <link rel='stylesheet' href='css/base.css' />
    <link rel='stylesheet' href='css/common.css' />
    <style type='text/css'>
        body {
            margin: 0 auto;
            max-width: 720px;
            padding: 0 10px;
            text-align: left;
        }

        .title {
            color: red;
            font-weight: bold;
            padding: 10px 0 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
        }

        h2 {
            font-size: 15px;
            font-weight: normal;
        }

        .wrapper {
            padding: 20px 0 0;
            line-height: 24px;
        }

        .tab {
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .tab:last-child {
            border-bottom: 0;
        }

        .param {
            word-break: break-all;
        }

        .action {
            padding: 10px 0 0;
        }

        .action button {
            padding: 5px 20px;
        }

        .select-ipt {
            position: relative;
            padding: 0 0 0 105px;
        }

        .select-ipt .tt {
            position: absolute;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            left: 0;
            top: 0;
        }

        .weui_input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            height: 24px;
            line-height: 24px;
        }
    </style>
    <script src='https://www.web000.cn/layer.min.js'></script>
    <!--    <script src='layer.js'></script>-->
</head>
<body>
<div class='wrapper'>
    <h1>layer-weui封装函数</h1>
    <p class='title'>type:0弹窗,1:msg,2:loading,3:网页</p>
    <div class='tab'>
        <h2>layer.open({})原生弹窗:</h2>
        <p>
            <span>anim：</span>
            <span class='param'>scale,up,left,right</span>
        </p>
        <p class='action'>
            <button class='layerOpen'>纯文字</button>
            <button class='layerOpen1'>有标题</button>
            <button class='layerOpen2'>有按钮</button>
        </p>
        <p class='action'>
            <button class='layerOpen3'>up</button>
            <button class='layerOpen4'>down</button>
            <button class='layerOpen5'>left</button>
            <button class='layerOpen6'>right</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerAlert(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class='param'>提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class='param'>设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class='param'>点击回调函数</span>
        </p>
        <p class='action'>
            <button class='layerAlert'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerConfirm(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class='param'>提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class='param'>设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class='param'>确定按钮回调函数</span>
        </p>
        <p>
            <span>onCancel：</span>
            <span class='param'>取消按钮回调函数</span>
        </p>
        <p class='action'>
            <button class='layerConfirm'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerLoading(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p class='action'>
            <button class='layerLoading'>数据加载中</button>
        </p>
        <p class='action'>
            <button class='layerLoading2'>数据加载中(type:2)</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerSuccess(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p class='action'>
            <button class='layerSuccess'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerDelete(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p class='action'>
            <button class='layerDelete'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerMsg():</h2>
        <p class='action'>
            <button class='layerMsg'>点击（scale）</button>
        </p>
        <p class='action'>
            <button class='layerMsgFoot'>点击（bottom）</button>
        </p>
    </div>
    <div class='tab'>
        <h2>LayerAction():</h2>
        <p class='action'>
            <button class='layerAction'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>layer-Select():</h2>
        <p>
            <span>msg：msg</span>
            <span class='param'>提示内容</span>
        </p>
        <p class='action select-ipt'>
            <input type='text' class='weui_input' name='zhiyi' readonly placeholder='请点击选择职业' />
            <span class='tt'>职业</span>
        </p>
        <p class='action select-ipt'>
            <input type='text' class='weui_input' name='xuexiao' readonly placeholder='请点击选择职业' />
            <span class='tt'>学校</span>
        </p>
    </div>
    <div class='tab'>
        <h2>popupBottom():是由底部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class='action'>
            <button class='popupBottom'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>popupTop():是由顶部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class='action'>
            <button class='popupTop'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>popupRight():是由右边弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class='action'>
            <button class='popupRight'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>popupLeft():是由右边弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class='action'>
            <button class='popupLeft'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>layer自带图标</h2>
        <div class='action'>
            <i class='weui-icon-success'></i>
            <i class='weui-icon-waiting'></i>
            <i class='weui-icon-warn'></i>
            <i class='weui-icon-info'></i>
            <i class='weui-icon-success-circle'></i>
            <i class='weui-icon-success-no-circle'></i>
            <i class='weui-icon-checked'></i>
            <i class='weui-icon-checked-multi'></i>

            <i class='weui-icon-waiting-circle'></i>
            <i class='weui-icon-circle'></i>
            <i class='weui-icon-download'></i>
            <i class='weui-icon-info-circle'></i>
            <i class='weui-icon-safe-success'></i>
            <i class='weui-icon-safe-warn'></i>
            <i class='weui-icon-cancel'></i>
            <i class='weui-icon-search'></i>

            <i class='weui-icon-clear'></i>
            <i class='weui-icon-delete weui-icon_gallery-delete'></i>
            <i class='weui-icon_msg'></i>
            <i class='weui-icon_msg weui-icon-warn'></i>
            <i class='weui-icon_msg-primary weui-icon-warn'></i>
            <p>图标2</p>
            <i class='weui-loading'></i>
            <i class='weui-icon-more'></i>
            <i class='weui-icon-btn_goback'></i>
            <i class='weui-icon-btn_close'></i>
        </div>
    </div>
    <div class='tab'>
        <h2>由左向右边弹出</h2>
        <p class='action'>
            <button class='pageAnimationLeft'>点击</button>
        </p>
    </div>
    <div class='tab'>
        <h2>弹出多图组成</h2>
        <p class='action'>
            <button class='photo-layer'>点击</button>
        </p>
    </div>
</div>
<script type='text/javascript'>
    $$('.layerOpen').on('click', function() {
        layer.open({
            zIndex: 10,
            fixed: false,
            content: '系统升级中，敬请期待！',
            className: 'weui'
        });
    });

    $$('.layerOpen1').on('click', function() {
        layer.open({
            title: ['温馨提示', 'background-color: #F2F2F2;'],
            content: '系统升级中，敬请期待！'
        });
    });

    $$('.layerOpen2').on('click', function() {
        layer.open({
            content: '系统升级中，敬请期待！',
            btn: '知道了'
        });
    });

    $$('.layerOpen3').on('click', function() {
        layer.open({
            anim: 'up',
            content: '系统升级中，敬请期待！',
            className: 'weui'
        });
    });

    $$('.layerOpen4').on('click', function() {
        layer.open({
            anim: 'down',
            content: '系统升级中，敬请期待！',
            className: 'weui'
        });
    });

    $$('.layerOpen5').on('click', function() {
        layer.open({
            anim: 'left',
            content: '系统升级中，敬请期待！',
            className: 'weui'
        });
    });

    $$('.layerOpen6').on('click', function() {
        layer.open({
            anim: 'right',
            content: '系统升级中，敬请期待！',
            className: 'weui'
        });
    });

    $$('.layerAlert').on('click', function() {
        var title = '警告';
        var msg = 'AlphaGo 就是天网的前身，人类要完蛋了！';
        layer.alert({
            // title: title,
            msg: msg,
            onOK: function(i) {
                layer.close(i);
            }
        });
    });

    $$('.layerConfirm').on('click', function() {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            onOK: function() {
                layer.loading('正在登陆中');
            },
            onCancel: function() {
                alert(2);
            }
        });
    });

    $$('.layerLoading').on('click', function() {
        layer.loading();
    });

    $$('.layerLoading2').on('click', function() {
        layer.loading({
            skin: 't2'
        });
    });

    $$('.layerSuccess').on('click', function() {
        //layerSuccess('已完成');
        layer.toast('操作成功');
    });

    $$('.layerDelete').on('click', function() {
        layer.toast({
            msg: '取消登录',
            style: 'error'
        });
    });

    $$('input[name=zhiyi]').select({
        title: '选择职业',
        input: '法官',
        items: ['法官', '医生', '猎人', '学生', '记者', '其他']
    });

    $$('input[name=xuexiao]').select({
        title: '选择学校',
        multi: true,
        items: ['南昌大学', '财经大学', '江西师范大学', '航空大学', '江西理工学院', '其他']
    });

    $$('.layerMsg').on('click', function() {
        layer.msg({
            msg: '111',
            anim: 'scale',
            time: 1000
        });
    });

    $$('.layerMsgFoot').on('click', function() {
        layer.msg({
            msg: '至少选择2',
            direct: 'bottom'
        });
    });

    $$('.layerAction').on('click', function() {
        layer.actions({
            actions: [
                {
                    text: '编辑',
                    onClick: function() {
                        //layer.loading();
                        layer.toast('操作成功', function() {
                            layer.closeAll();
                        });
                    }
                },
                {
                    text: '删除',
                    style: 'color:red;',
                    onClick: function() {
                        //do something
                    }
                }
            ]
        });
    });

    $$('.popupBottom').on('click', function() {
        var html = '<div>';
        html += '<div>我是底部弹出框效果</div>';
        html += '<div>我是底部弹出框效果</div>';
        html += '<div>我是底部弹出框效果</div>';
        html += '</div>';
        layer.popup({
            content: html,
            direction: 'bottom'
        });
    });

    $$('.popupTop').on('click', function() {
        var html = '<div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '</div>';
        layer.popup({
            content: html,
            direction: 'top'
        });
    });

    $$('.popupRight').on('click', function() {
        var html = '<div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '</div>';
        layer.popup({
            content: html,
            direction: 'right'
        });
    });

    $$('.popupLeft').on('click', function() {
        var html = '<div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '<div>我是顶部弹出框效果</div>';
        html += '</div>';
        layer.popup({
            content: html,
            direction: 'left'
        });
    });

    $$('.pageAnimationLeft').on('click', function() {
        var html = '<div class="page-left">';
        html += '<P class="close">点击关闭</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '</div>';
        layer.popup({
            content: html,
            direction: 'right',
            style: 'width: 100%;',
            success: function() {
                $$('.page-left .close').on('click', function() {
                    layer.closeAll();
                });
            }
        });
    });


    $$('.photo-layer').on('click', function() {
        layer.photoLayer({
            shadeClose: false,
            items: [
                {
                    img: 'images/tip_01.png'
                },
                {
                    img: 'images/tip_02.png'
                },
                {
                    img: 'images/tip_03.png',
                    className: 'close',
                    link: 'http://www.baidu.com'
                },
                {
                    img: 'images/tip_04.png'
                },
                {
                    img: 'images/tip_05.png'
                }
            ],
            success: function() {
            }
        });
    });
</script>
</body>
</html>
